<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jsAnim.js"></script>
    <script src="BrowserDetect.js"></script>
    <style type="text/css">
        *{margin: 0;padding: 0;list-style: none;}
        .mian{
            width: 1100px;
            margin:0 auto;
            border: 1px solid #ddd;
            padding: 0px 5px;
            margin-top: 700px;
        }
        .mian>div>div{
            width: 1000px;
            height: 400px;
            margin: auto;
            background-color: crimson;
        }
        .bottom{
            width: 1000px;
            height: 500px;
            margin: auto;
            background-color: black;
        }
        .mian>div>span{
            display: block;
            font-size: 20px;
            font-family: 微软雅黑;
            line-height: 3em;
        }
        #nav{
            position: fixed;
            bottom: 50px;
            left: 50%;
            margin-left: -630px;
            display: none;
            height: 0;
            width: 0;
            overflow: hidden;
        }
        #nav>li{
         text-align: center;
         cursor: pointer;
         background-color: rgba(0,0,0,.6);
         margin-top: 5px;
         width: 24px;
         height: 28px;
         font-size: 12px;
         line-height: 14px;
         padding: 5px;
         color: #fff;
        }
    </style>
</head>
<body>

  <div class="mian">
     <div>
         <span class="layer">美丽人生</span>
         <div></div>
     </div>
      <div>
          <span class="layer">潮电酷玩</span>
          <div></div>
      </div>
      <div>
          <span class="layer">居家生活</span>
          <div></div>
      </div>
      <div>
          <span class="layer">打造爱巢</span>
          <div></div>
      </div>
      <div>
          <span class="layer">户外出行</span>
          <div></div>
      </div>
      <div>
          <span class="layer">亲子时光</span>
          <div></div>
      </div>
      <div class="bottom"></div>
  </div>
  <ul id="nav">
      <li>美丽人生</li>
      <li>潮电酷玩</li>
      <li>居家生活</li>
      <li>打造爱巢</li>
      <li>户外出行</li>
      <li>亲子时光</li>
  </ul>
<script>

    //当前位置
      var index;
    //颜色
    var color = ['#EA5F8D',"#0AA618","#643CCC",'#F15453','#19C8A9','#F7A945','#000'];
    //侧边导航栏容器
   var navs = document.getElementById('nav');
    //侧边导航栏所以的栏目
    var navsList = navs.getElementsByTagName('li');
   //所有的栏目名称
   var  layer =  document.getElementsByClassName('layer');
  //获取页面根节点
    var srcElement;
    //兼容IE
    if(BrowserDetect.browser=="Internet Explorer"||BrowserDetect.version=='11'||BrowserDetect.browser=="Firefox"){
        srcElement =document.documentElement;
    }else{
        srcElement =document.body;
    }
    // 绑定窗口事件
    window.onscroll = scrollEvent;
    //处理导航栏点击事件
      for(var i = 0;i<navsList.length;i++){
          //通过创造属性的方式,保存当前的i值。
          navsList[i].n = i;
          //绑定单击事件
          navsList[i].onclick = function(){
              //当前选中的栏目设置为true,true已被选中。
              layer[this.n].flag = true;
              //点击导航栏时清除窗口滚动条事件
              window.onscroll = null;
              //将当前的导航栏的鼠标移入移出清除
              this.onmouseover = null;
              this.onmouseout = null;
              //判断记录指针是否有存储记录
              if(index!==undefined){
                  //当之前的导航栏的背景设置为初始值
                  navsList[index].style.backgroundColor = 'rgba(0,0,0,.6)';
                  //将之前的导航栏鼠标移入移出事件设置回来
                  navsList[index].onmouseover = over;
                  navsList[index].onmouseout = out;
                  //当前选中的栏目设置为false,true没被选中。
                  layer[index].flag = false;
              }
              //开启滑动动画
              starAnim(layer[this.n].offsetTop,srcElement);
              //当前的导航栏设置选中时的颜色
              this.style.backgroundColor = color[this.n];
              //记录当前指针
              index = this.n;
          }

      }

    //给所有导航栏目绑定悬浮事件
    for(var j =0;j<navsList.length;j++){
        navsList[j].n = j;
        navsList[j].onmouseover =  over;
        navsList[j].onmouseout = out;
    }
    //栏目移出事件
    function out(){
        this.style.backgroundColor =  'rgba(0,0,0,.6)';
    }
    //栏目移入事件
    function over(){
        this.style.backgroundColor = color[this.n];
    }

     //窗口滚动条事件
     function scrollEvent(){

         //获取当前滚动条距离整个页面顶部的距离(不是浏览器可视距离)
        var scroll = document.body.scrollTop||document.documentElement.scrollTop;

         //显示隐藏左侧导航栏
        if(scroll>=500){
            window.onscroll = null;
            navs.style.display = 'block';
            startMove(navs,{width:34,height:264},function(){
                window.onscroll = scrollEvent;
            });

        }else{
            window.onscroll = null;
            startMove(navs,{width:0,height:0},function(){
                navs.style.display = 'none';
                window.onscroll = scrollEvent;
            });
        }


   //楼层判断
        for(var i=0;i<layer.length;i++){
            //获取本容器的高度
            var height = layer[i].parentElement.offsetHeight/2;
            //获取当前容器距离顶部的高度
            var top = layer[i].offsetTop;
            //判断是否在当前楼层区域
            if(scroll>top-height&&scroll<top+height){
                //layer[i].flag = true，代表以被选中,无需在次选中,通过continue禁止再次选中。
               if(layer[i].flag){
                    continue;
                }
                //将当前的导航栏的移入移出事件清除
                navsList[i].onmouseover = null;
                navsList[i].onmouseout = null;
                //判断记录指针是否有存储记录
                if(index!==undefined){
                    //将之前的导航栏设置为初始颜色
                    navsList[index].style.backgroundColor = 'rgba(0,0,0,.6)';
                    //将之前的导航栏绑定鼠标移入移出事件
                    navsList[index].onmouseover = over;
                    navsList[index].onmouseout = out;
                    layer[index].flag = false;
                }
                //设置当前导航栏为选中状态颜色
                navsList[i].style.backgroundColor = color[i];
                //记录当前指针
                index =i;
                //代表当前选项为当前区域
                layer[i].flag = true;
                //提前结束循环,避免多余判断
                return;
     }
    }
    }

   function starAnim(target,obj){
       clearInterval(obj.times);
       obj.times = setInterval(function(){
           var speed = (target-obj.scrollTop)/5;
           speed = speed>0?Math.ceil(speed):Math.floor(speed);
           if (obj.scrollTop==target) {
               clearInterval(obj.times);
               window.onscroll = scrollEvent;
           }else{
               obj.scrollTop = obj.scrollTop + speed;
           }
       },30)
    }

</script>
</body>
</html>